<%@ page contentType="text/html;charset=UTF-8" %>
    <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
        <html>

        <head>
            <title>管理主页</title>
            <link rel="shortcut icon" href="img/library.ico" />
            <link rel="stylesheet" href="css/bootstrap.min.css">
            <script src="js/jquery-3.2.1.js"></script>
            <script src="js/bootstrap.min.js"></script>
            <style>
                body {
                    min-height: 100vh;
                    margin: 0;
                    padding: 0;
                    background: url('img/book2.jpg') no-repeat center center fixed;
                    background-size: cover;
                    position: relative;
                }

                body::before {
                    content: '';
                    position: fixed;
                    left: 0;
                    top: 0;
                    right: 0;
                    bottom: 0;
                    background: rgba(255, 255, 255, 0.92);
                    z-index: 0;
                }

                .main-container {
                    position: relative;
                    z-index: 1;
                    padding: 80px 20px 20px;
                }

                .welcome-section {
                    text-align: center;
                    margin-bottom: 40px;
                    padding: 30px;
                    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
                    border-radius: 15px;
                    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
                }

                .logo-container {
                    margin-bottom: 20px;
                }

                .logo-container img {
                    max-width: 150px;
                    height: auto;
                    transition: transform 0.3s ease;
                }

                .logo-container img:hover {
                    transform: scale(1.05);
                }

                .welcome-title {
                    font-size: 2.5em;
                    color: #1a237e;
                    margin-bottom: 10px;
                    font-weight: bold;
                }

                .welcome-subtitle {
                    color: #455a64;
                    font-size: 1.2em;
                }

                .features-container {
                    display: grid;
                    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
                    gap: 20px;
                    max-width: 1200px;
                    margin: 0 auto;
                }

                .feature-card {
                    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
                    border-radius: 15px;
                    padding: 30px;
                    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
                    transition: all 0.3s ease;
                    cursor: pointer;
                    text-decoration: none;
                    color: inherit;
                    display: block;
                    border: 1px solid rgba(0, 0, 0, 0.05);
                }

                .feature-card:hover {
                    transform: translateY(-5px);
                    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
                    text-decoration: none;
                    color: inherit;
                }

                .feature-icon {
                    font-size: 2.5em;
                    color: #1a237e;
                    margin-bottom: 15px;
                }

                .feature-title {
                    font-size: 1.3em;
                    color: #1a237e;
                    margin-bottom: 10px;
                    font-weight: bold;
                }

                .feature-description {
                    color: #455a64;
                    font-size: 1em;
                    line-height: 1.6;
                }

                .modal-content {
                    border-radius: 15px;
                    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.15);
                    border: none;
                }

                .modal-header {
                    background: linear-gradient(135deg, #1a237e 0%, #283593 100%);
                    border-radius: 15px 15px 0 0;
                    border-bottom: none;
                    padding: 20px;
                }

                .modal-title {
                    color: #ffffff;
                    font-weight: bold;
                }

                .modal-body {
                    padding: 25px;
                    color: #455a64;
                    font-size: 1.1em;
                }

                .modal-footer {
                    border-top: none;
                    padding: 20px;
                }

                .btn-primary {
                    background: linear-gradient(135deg, #1a237e 0%, #283593 100%);
                    border: none;
                    padding: 10px 25px;
                    border-radius: 8px;
                    transition: all 0.3s ease;
                    font-weight: 500;
                }

                .btn-primary:hover {
                    background: linear-gradient(135deg, #283593 0%, #303f9f 100%);
                    transform: translateY(-1px);
                    box-shadow: 0 4px 15px rgba(26, 35, 126, 0.2);
                }

                .close {
                    color: #ffffff;
                    opacity: 0.8;
                    text-shadow: none;
                }

                .close:hover {
                    color: #ffffff;
                    opacity: 1;
                }

                @media (max-width: 768px) {
                    .features-container {
                        grid-template-columns: 1fr;
                    }
                }
            </style>
            <script>
                $(function () {
                    $('#header').load('admin_header.html');
                })
            </script>
        </head>

        <body>

            <div id="header"></div>

            <div class="main-container">
                <div class="welcome-section">
                    <div class="logo-container">
                        <img src="static/img/logo.png" alt="图书馆Logo">
                    </div>
                    <h1 class="welcome-title">欢迎使用图书管理系统</h1>
                    <p class="welcome-subtitle">高效管理图书，提升服务质量</p>
                </div>

                <div class="features-container">
                    <a href="admin_books.html" class="feature-card">
                        <div class="feature-icon">📚</div>
                        <h3 class="feature-title">图书管理</h3>
                        <p class="feature-description">管理馆藏图书，添加新书，编辑图书信息，查看借阅状态</p>
                    </a>
                    <a href="allreaders.html" class="feature-card">
                        <div class="feature-icon">👥</div>
                        <h3 class="feature-title">读者管理</h3>
                        <p class="feature-description">管理读者信息，添加新读者，查看读者借阅历史</p>
                    </a>
                    <a href="lendlist.html" class="feature-card">
                        <div class="feature-icon">📝</div>
                        <h3 class="feature-title">借还管理</h3>
                        <p class="feature-description">查看借还记录，处理图书借还，管理逾期情况</p>
                    </a>
                </div>
            </div>

            <!-- 模态框（Modal） -->
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
                aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                &times;
                            </button>
                            <h4 class="modal-title" id="myModalLabel">
                                温馨提示
                            </h4>
                        </div>
                        <div class="modal-body">
                            使用结束后请安全退出。
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-primary" data-dismiss="modal">知道了
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <c:if test="${!empty login}">
                <script>
                    $(function () {
                        $("#myModal").modal({
                            show: true
                        })
                    })
                </script>
            </c:if>

        </body>

        </html>